<button id="btn">按钮</button>
<script>
   /*  // 1、箭头函数无arguments(使用rest参数替代)
    function f1(){
        console.log(arguments);
    }
    f1(1,2,3)

    let f2=(...args)=>{
        console.log(args);//[1, 2, 3, 4, 5]
        // console.log(arguments);// arguments is not defined  arguments被当做了变量
    }
    f2(1,2,3,4,5) */


   /*  // 2、箭头函数不能作为构造函数存在，不能new实例化
    let Fun=()=>{
        this.name="zs"
    }
    // let f=new Fun()// Fun is not a constructor
    // console.log(f);
 */

    // 3、this指向问题
    // 箭头函数的this在定义的时候就已经确定了，不会再改变了（function是调用的时候才确定）
    // 箭头函数的this取决于父级环境中的this

    //环境：全局环境和局部(函数)环境
    //父级环境：包含箭头函数的函数是局部环境，全局就是全局环境





   /*  // 3.1 在全局中定义箭头函数：不是Window调用的，
    // 在全局中声明的变量和函数，都会成为window全局对象的属性，
    // 而箭头函数不会成window的属性

    console.log(this);//Window

    let f3=()=>{
        console.log(this);//Window
    }
    f3()
   console.log( window.f3);//undefined f3不属于window 并不是window调用的f3,所以this指向window并不是因为window调用的f3
   //  箭头函数中的this指向window是因为：这个函数的【父级环境】 中的this指向了window 



    function f4(){
        console.log(this);
    }
    // f4()
    // window.f4()// 其实是这样调用的，只是window是可以省略的，是window调用的f4,所以this指向window */



    //3.2 在事件处理函数中定义:this指向window
    console.log(this);//Window
    btn.onclick=()=>{
        console.log(this);//Window
    }
    //箭头函数中的this指向window是因为：这个函数的【父级环境】 中的this指向了window


    // 3.3 函数套箭头函数

    f5()
    let f55=new f5()
    function f5(){
        console.log(this);//window  实例f55

        let f6=()=>{
            console.log(this);//Window 实例f55
            // 这里是window还是f5取决于，父级环境：f5函数中的this
        }
        f6()
    }


    
    let  obj={
        name:"obj",
        say(){
            console.log(this);//obj

            let f7=()=>{
                console.log(this);//obj
            }
            f7()

        }
    }
    obj.say()



    let obj2={
        name:"obj2",
        fun(){

            // setInterval(function(){
            //     // 我希望每隔1s就打印一下this
            //     console.log(this);//window 定时器里面的this就是指向window的，因为是window调用的定时器
            //     console.log(this.name);
            //     console.log("我是"+this.name);

            // },1000)

            console.log(this);//obj2

            setInterval(()=>{
                console.log(this);
                console.log(this.name);
                console.log("我是"+this.name);

            },1000)

        }
    }
    obj2.fun()



    // 4、call和apply不能改变箭头函数的this

    console.log(this);//window

    let obj1={
        name:"obj1",
        f(){
            console.log(this,1111);
        },
        f1:()=>{
            console.log(this,222);
        }
    }
    obj1.f()////{name: 'obj1', f: ƒ}
    obj1.f.call(obj)//{name: 'obj', say: ƒ} 1111

    obj1.f1()//Window
    obj1.f1.call(obj)//Window


    // 箭头函数的应用：
    // 1、对象中函数不适合使用箭头函数
    // 2、不用作为构造函数
    // 3、事件函数也不适用

    // 1、作为回调函数（回调函数中一般不使用this）
    // 2、对象中的函数中的函数或者是定时器，适合用箭头函数

    


  




</script>